<template>
  <view class="container">
    <u-form :model="formData" ref="data" :rules="rules1" label-width="130" class="t_form">
      <u-form-item label="原密码" prop="olaPass" :border-bottom="false">
        <u-input v-model="formData.olaPass" :border="true" type="password" placeholder="请输入原密码" />
      </u-form-item>
      <u-form-item label="新密码" prop="newPass" :border-bottom="false">
        <u-input v-model="formData.newPass" :border="true" type="password" placeholder="请输入新密码" />
      </u-form-item>
      <u-form-item label="确认密码" prop="password" :border-bottom="false">
        <u-input v-model="formData.password" :border="true" type="password" placeholder="请再次输入新密码" />
      </u-form-item>
    </u-form>
    <view @click="submit1" class="button">提交</view>
    <!-- 验证码 -->
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'
  import {
    onReady
  } from '@dcloudio/uni-app';
  import ui from '@/utils/index.js'
  const data = ref(null)
  const formData = reactive({
    olaPass: '',
    newPass: '',
    password: ''
  })
  const rules1 = reactive({
    olaPass: [{
      required: true,
      message: '请输入原密码',
      trigger: ['change', 'blur'],
    }],
    newPass: [{
      required: true,
      message: '请输入新密码',
      trigger: ['change', 'blur'],
    }],
    password: [{
      required: true,
      message: '请再次输入新密码',
      trigger: ['change', 'blur'],
    }, {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        if (formData.newPass != value) {
          return false
        }
      },
      message: '两次密码不一样',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur'],
    }]
  })
  onReady(() => {
    data.value.setRules(rules1);
  })
  // 提交表单
  const submit1 = () => {
    data.value.validate().then(res => {
      console.log('表单数据信息：', res);
    }).catch(err => {
      console.log('表单错误信息：', err);
    })
  }
  // 验证码回调
  const codeChange = (text) => {
    codeTips.value = text;
  }
</script>

<style lang="scss">
  .container {
    padding: 20rpx 30rpx;
    background-color: #fff;
  }
  .t_form {
    box-sizing: border-box;
  }

  .button {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    background-color: #7F7F7F;
    color: #fff;
    font-size: 30rpx;
    line-height: 100rpx;
    text-align: center;
  }
</style>